<!--
 * @Description: 时间轴标记
 * @Author: zhaolei
 * @Date: 2023-08-02 16:51:37
-->

<template>
  <el-dialog
    title="时间轴标记"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      v-if="visible"
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
    </avue-form>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        :loading="loading"
        type="primary"
        @click="confirm"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { BACKLOG_LIST } from '@/const/type';
import {
  finishPetMatter,
  getPetMatterDetail,
  editPetMatter,
} from '@/api/core/pet-file';
export default {
  name: 'timeLineFinish',
  components: {},
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
    matterName: {
      type: String,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      // tableOption: tableOption(),
      fileList: [],
      isCropper: false,
      list: BACKLOG_LIST,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        emptyBtn: false,
        submitBtn: false,
        addBtn: false,
        labelWidth: 110,
        row: true,
        column: [
          {
            label: '完成事项',
            prop: 'matterName',
            detail: true,
          },
          {
            label: '完成日期',
            prop: 'completeTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            search: true,
            width: 160,
            searchRange: true,
            rules: [
              {
                required: true,
                message: '请选择完成日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            showWordLimit: true,
            maxlength: 50,
            minRows: 7,
            rules: [
              {
                required: false,
                message: '请输入备注',
              },
            ],
            span: 24,
          },
        ],
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$refs.addForm && this.$refs.addForm.resetForm();
      } else {
        this.$nextTick(async () => {
          await this.getDetail();
        });
      }
    },
  },
  methods: {
    confirm() {
      this.$refs.addForm.validate(async (valid, done) => {
        if (valid) {
          this.loading = true;
          try {
            const params = { ...this.form };
            params.id = this.id;
            params.completeTime =
              this.form.completeTime.substr(0, 10) + ' 23:59:59';
            const callback = this.isEdit ? editPetMatter : finishPetMatter;
            await callback(params);
            this.$message.success('操作成功');
            this.$emit('success', true);
            done();
            this.loading = false;
            this.visible = false;
          } catch (error) {
            done();
            this.loading = false;
            throw new Error(error);
          }
        }
      });
    },
    async getDetail() {
      const res = await getPetMatterDetail(this.id);
      this.form = { ...res.data.data };
    },
  },
};
</script>

<style lang='scss' scoped>
.mb-20 {
  margin-bottom: 20px;
}
.mr-50 {
  margin-right: 50px;
}
</style>
